<template>
    <view class="page-coupon">
        <mx-navbar :isClearFixed="true" title="领券中心" />
        <view class="cp-module" v-if="cp_list && cp_list.length > 0">
            <coupon-com :code="code" :channel_code="channel_code" :coupon="item" v-for="(item, index) in cp_list" :key="index" />
        </view>
        <view class="empty" v-else>
            <mx-empty txt="暂无优惠券"></mx-empty>
        </view>
    </view>
</template>

<script setup>
import couponCom from './com/coupon.vue'
const { proxy } = getCurrentInstance()
const data = reactive({
    channel_code: 1,
    code: '',
    cp_list: []
})

const { channel_code, code, cp_list } = toRefs(data)

onLoad((options) => {
    data.channel_code = options.channel_code || 1
    data.code = options.code || ''
})
onShow(() => {
    getList()
})

const getList = async () => {
    if (!data.code) return proxy.$tools.toast('券码不存在')
    let res = await proxy.$api('CouponIndex', {
        code: data.code,
        channel_code: data.channel_code
    })
    if (res.code === 0) {
        data.cp_list = res.data.coupon || []
    }
}



onShareAppMessage(() => { })
onShareTimeline(() => { })
</script>

<style lang="scss" scoped>
.page-coupon {
    min-height: 100vh;
    background: $bg;

    .cp-module {
        padding: 24rpx;
    }

    .empty {
        width: 100%;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .empty-img {
            width: 300rpx;
        }

        .empty-txt {
            margin-top: 50rpx;
            font-size: 28rpx;
            color: #333;
        }
    }
}
</style>
